Brand Style Guide
ATLAS Meridia is a laboratory for exploring what becomes possible when artificial intelligence, knowledge architecture, and creative technology intersect.
Three pillars define who we are and how we operate.
We approach every problem with genuine intellectual curiosity, valuing questions as much as answers.
We pursue depth over breadth, building understanding through systematic exploration and careful documentation.
We believe in the power of well-made things—elegant solutions, refined interfaces, and thoughtful systems.
The name itself speaks to our orientation: an atlas maps territories both known and unknown, while a meridian marks the line from which all other measurements are taken.
We aim to be both—cartographers of emerging possibility and a fixed point of reference in a rapidly shifting landscape. Our work exists at the meridians: the invisible lines where different fields of knowledge converge. At these boundaries, the unexpected emerges.
If ATLAS Meridia were a person, they would be...
We take time to consider deeply, but remain approachable and warm.
We know our craft and share it generously, without condescension.
We care about details because they matter, not to show off.
We embrace bold exploration within a framework of thoughtful practice.
The ATLAS Meridia wordmark is our primary brand identifier. It uses Cormorant Garamond with "ATLAS" in medium weight uppercase and "Meridia" in light italic.
ATLAS Meridia
ATLAS Meridia
Maintain minimum clear space around the logo equal to the cap-height of the "A" in ATLAS. This ensures the wordmark has room to breathe and maintains visual impact.
ATLAS Meridia
X X X XX = Cap-height of "A" in the wordmark
To ensure legibility, the wordmark should never appear smaller than the minimum sizes specified below.
ATLAS Meridia
Minimum: 14px cap-height / 120px width
ATLAS Meridia
Minimum: 0.5" / 12mm width
To maintain brand integrity, avoid these common misuses of the wordmark.
ATLAS M
Don't stretch
ATLAS Meridia
Don't recolor
ATLAS Meridia
Don't rotate
ATLAS Meridia
Don't change font
The primary dark palette. Navy-800 serves as the main dark background, with lighter values for layering and text.
The warm light palette. Cream-200 is the primary background, with 100 for elevated surfaces and cards.
Gold serves as the primary accent for CTAs and highlights. Use copper sparingly for secondary emphasis.
Used for headlines, titles, and display text. Light weight (300) for elegance, with italic for emphasis.
Navigating the edges of intelligence
Navigating the edges of intelligence
Two serif options optimized for screen readability. Crimson Pro is recommended for its warmth and bookish character.
The most interesting discoveries happen where disciplines converge. At these boundaries, the unexpected emerges. The tools that will matter tomorrow are rarely obvious today.
Warm, bookish character with subtle calligraphic qualities. Excellent italics. Ideal for long-form reading and editorial content.
The most interesting discoveries happen where disciplines converge. At these boundaries, the unexpected emerges. The tools that will matter tomorrow are rarely obvious today.
More neutral and technical. Higher x-height for screen legibility. Good alternative for more technical or data-heavy contexts.
Reserved for small text: labels, captions, navigation, footnotes, and interface elements.
Section Label • Navigation • Footnotes
Used sparingly for functional text that needs to recede visually while remaining highly legible at small sizes.
A modular scale from 10px to 56px. Use display font for larger sizes, body font for base-xl, UI font for xs-sm.
Our voice is the consistent personality that comes through in all communications. It doesn't change—only the tone adapts to context.
We favor clarity above all. Complex ideas, simple language.
Every word earns its place. We edit ruthlessly.
Intellectual but never cold. We write for humans.
No jargon, no hype. We say what we mean.
While voice stays constant, tone shifts based on situation. Here's how we adapt.
Thoughtful and exploratory. We're sharing discoveries, not selling.
Example: "We've been exploring how knowledge graphs might reshape personal note-taking—here's what we've learned."
Conversational but still substantive. Share insights, not noise.
Example: "Interesting finding: the best AI prompts read like good briefs to a human collaborator."
Direct and helpful. Clarity is kindness.
Example: "To get started, create a new project folder and run the setup script."
Personal and respectful of time. Get to the point gracefully.
Example: "Thanks for reaching out. I'd love to hear more about what you're building."
Practical rules for writing in the ATLAS Meridia voice.
An 8px-based scale with some 4px increments for fine-tuning. Use consistently for padding, margins, and gaps.
Prose content should be constrained for optimal reading. Use these max-widths consistently.
Prose (38rem / ~65 characters) — Body text, articles, editorials
Prose Wide (48rem) — Extended content, wider layouts
Content (64rem) — Grid layouts, card containers
Three button styles for different contexts. Primary for main CTAs, outline for secondary actions, ghost for dark backgrounds.
Inline links use gold underlines. Subtle links for navigation and secondary text.
Section labels and metadata use DM Sans with wide letter-spacing.
Gold labels for section headers and emphasis
Muted labels for secondary information
Three timing presets. Use fast for micro-interactions, base for most transitions, slow for larger animations. Hover to preview.
Use standard ease for most transitions. The brand's wave motifs should use ease-in-out for smooth oscillation.
transition: all 300ms ease;
animation: wave 8s ease-in-out infinite;
Ghost CMS generates specific HTML structures for content cards, membership features, and page templates. These guidelines ensure consistent ATLAS Meridia styling across all Ghost-generated elements.
Ghost's editor produces cards with .kg-* classes. Style these to match our brand aesthetic.
.kg-bookmark-card — Rich link previews with title, description, and thumbnail
💡 This approach works best when combined with systematic documentation practices.
.kg-callout-card — Highlighted information with optional emoji
.kg-toggle-card — Collapsible FAQ-style content
Brand Guidelines v1.0
2.4 MB
.kg-file-card — Downloadable file attachments
Ghost images can break out of the content container for visual impact. Define negative margins for wide/full variants.
.kg-width-normal
Contained within prose width (~38rem)
.kg-width-wide
Breaks out to ~85vw with negative margins
.kg-width-full
Full viewport width (100vw), no border radius
.kg-width-wide {
position: relative;
width: 85vw;
min-width: 100%;
margin: auto calc(50% - 50vw);
transform: translateX(calc(50vw - 50%));
}
.kg-width-full {
position: relative;
width: 100vw;
left: 50%;
margin-left: -50vw;
}Two blockquote styles for different emphasis levels.
"The best way to predict the future is to invent it."
blockquote — Left border accent
"Knowledge compounds. Systems scale. Craft endures.
.kg-blockquote-alt — Centered display quote
Multi-image galleries with responsive grid layout.
.kg-gallery-card — Uses .kg-gallery-container, .kg-gallery-row, .kg-gallery-image
Subscription forms, CTAs, and member-specific content styling.
Stay in the loop
Get occasional updates on experiments and discoveries.
data-members-form="subscribe" — Email collection with Ghost Portal
This post is for subscribers only
Already a member? Sign in to continue reading.
.gh-post-upgrade-cta — Appears on gated content
Free
$0
Forever
Member
$9
/month
Use data-portal="signup/TIER_ID/monthly" for direct tier links
Ghost adds CSS classes to forms during submission. Style loading, success, and error states.
.loading
.success
.error
Common elements for post listings, archives, and article pages.
How Claude and Obsidian combine to create something greater than their parts.
Kenny Liu
Founder, ATLAS Meridia · Dec 1, 2025
Header and footer navigation patterns.
ATLAS Meridia
ATLAS Meridia
© 2025 ATLAS Meridia LLC
Quick reference for Ghost-generated CSS classes that need custom styling.
Content Cards
.kg-image-card
.kg-gallery-card
.kg-bookmark-card
.kg-button-card
.kg-callout-card
.kg-toggle-card
.kg-file-card
.kg-audio-card
.kg-video-card
.kg-product-card
.kg-header-card
.kg-signup-card
Image Widths
.kg-width-normal
.kg-width-wide
.kg-width-full
Forms
[data-members-form]
[data-members-email]
.loading
.success
.error
Membership
.gh-post-upgrade-cta
[data-portal]